.selected-button {
    background-color: rgba(var(--fuse-primary-rgb), 0.1);
}

.text-primary {
    color: var(--fuse-primary) !important;
}

.rotate-90 {
  transform: rotate(90deg);
}

.recording-button {
    background-color: rgba(var(--fuse-primary-rgb), 0.1);

    mat-icon {
        color: var(--fuse-primary);
    }
}

markdown {
    max-width: 1000px !important;
    overflow-x: scroll;
}

markdown p {
    line-height: 1.4;
    padding-bottom: 0.4em;
}

markdown pre {
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100%; /* Add this to constrain the width */
    overflow-x: auto; /* Add this to enable horizontal scrolling */
}
markdown li {
    list-style-type: circle;
    padding-left: 0.4em;
    margin-left: 1.8em;
    padding-bottom: 0.2em;
}

.attachment-previews {
    .mat-icon-button {
        // Ensure button alignment is correct if needed
    }
    img {
        // Add border or other styling if desired
        border: 1px solid var(--fuse-border);
    }
}

// Ensure message bubble images don't overflow excessively
.conversation-container {
    .max-w-3\/4 { // Targeting the message bubble class
        img {
            display: block; // Prevent extra space below image
            max-width: 100%; // Ensure image scales within bubble
        }
    }
}

//.regenerate-button {
//    position: absolute;
//    bottom: -24px;
//    left: 0;
//    transform: scale(0.8);
//    opacity: 0;
//    transition: opacity 0.2s;
//    background-color: var(--mat-mdc-fab-container-color);
//
//    mat-icon {
//        color: var(--mat-mdc-fab-icon-color);
//    }
//}

.relative:hover .regenerate-button {
    opacity: 1;
}

.chat-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;

  &:hover {
    background-color: #f5f5f5;
  }

  .chat-row-content {
    flex: 1;
  }

  .delete-button {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }

  &:hover .delete-button {
    opacity: 1;
  }
}






code[class*="language-"],
pre[class*="language-"] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  color: #90a4ae;
  background: #eef1f6;
  font-family: Roboto Mono, monospace;
  font-size: 1em;
  line-height: 1.5em;
  border-radius: 0.5em;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

code[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection {
  background: #cceae7;
  color: #263238;
}

code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"] ::selection {
  background: #cceae7;
  color: #263238;
}

:not(pre) > code[class*="language-"] {
  white-space: normal;
  border-radius: 0.2em;
  padding: 0.1em;
}

pre[class*="language-"] {
  overflow: auto;
  position: relative;
  margin: 0.5em 0;
  padding: 1.25em 1em;
}

.language-css > code,
.language-sass > code,
.language-scss > code {
  color: #f76d47;
}

[class*="language-"] .namespace {
  opacity: 0.7;
}

.token.atrule {
  color: #7c4dff;
}

.token.attr-name {
  color: #39adb5;
}

.token.attr-value {
  color: #f6a434;
}

.token.attribute {
  color: #f6a434;
}

.token.boolean {
  color: #7c4dff;
}

.token.builtin {
  color: #39adb5;
}

.token.cdata {
  color: #39adb5;
}

.token.char {
  color: #39adb5;
}

.token.class {
  color: #39adb5;
}

.token.class-name {
  color: #6182b8;
}

.token.comment {
  color: #aabfc9;
}

.token.constant {
  color: #7c4dff;
}

.token.deleted {
  color: #e53935;
}

.token.doctype {
  color: #aabfc9;
}

.token.entity {
  color: #e53935;
}

.token.function {
  color: #7c4dff;
}

.token.hexcode {
  color: #f76d47;
}

.token.id {
  color: #7c4dff;
  font-weight: bold;
}

.token.important {
  color: #7c4dff;
  font-weight: bold;
}

.token.inserted {
  color: #39adb5;
}

.token.keyword {
  color: #7c4dff;
}

.token.number {
  color: #f76d47;
}

.token.operator {
  color: #39adb5;
}

.token.prolog {
  color: #aabfc9;
}

.token.property {
  color: #39adb5;
}

.token.pseudo-class {
  color: #f6a434;
}

.token.pseudo-element {
  color: #f6a434;
}

.token.punctuation {
  color: #39adb5;
}

.token.regex {
  color: #6182b8;
}

.token.selector {
  color: #e53935;
}

.token.string {
  color: #f6a434;
}

.token.symbol {
  color: #7c4dff;
}

.token.tag {
  color: #e53935;
}

.token.unit {
  color: #f76d47;
}

.token.url {
  color: #e53935;
}

.token.variable {
  color: #e53935;
}

/**
 * VS theme by Andrew Lock (https://andrewlock.net)
 * Inspired by Visual Studio syntax coloring
code[class*="language-"],
pre[class*="language-"] {
  color: #393A34;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  font-size: .9em;
  line-height: 1.2em;


  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre > code[class*="language-"] {
  font-size: 1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  background: #C1DEF1;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  background: #C1DEF1;
}

// Code blocks
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border-radius: 0.4em;
  background: #eef1f6;
}

// Inline code
:not(pre) > code[class*="language-"] {
  padding: .2em;
  padding-top: 1px;
  padding-bottom: 1px;
  background: #f8f8f8;
  border: 1px solid #dddddd;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #008000;
  font-style: italic;
}

.token.namespace {
  opacity: .7;
}

.token.string {
  color: #A31515;
}

.token.punctuation,
.token.operator {
  color: #393A34; // no highlight
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
  color: #36acaa;
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*="language-css"] {
  color: #0000ff;
}

.token.function {
  color: #393A34;
}

.token.deleted,
.language-autohotkey .token.tag {
  color: #9a050f;
}

.token.selector,
.language-autohotkey .token.keyword {
  color: #00009f;
}

.token.important {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.class-name,
.language-json .token.property {
  color: #2B91AF;
}

.token.tag,
.token.selector {
  color: #800000;
}

.token.attr-name,
.token.property,
.token.regex,
.token.entity {
  color: #ff0000;
}

.token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

// overrides color-values for the Line Numbers plugin
// http://prismjs.com/plugins/line-numbers/
.line-numbers.line-numbers .line-numbers-rows {
  border-right-color: #a5a5a5;
}

.line-numbers .line-numbers-rows > span:before {
  color: #2B91AF;
}

// overrides color-values for the Line Highlight plugin
// http://prismjs.com/plugins/line-highlight/
.line-highlight.line-highlight {
  background: rgba(193, 222, 241, 0.2);
  background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
  background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}
*/
